<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
常用内置指令
    v-text 		:  更新元素的 innerText
    v-html 		:  更新元素的 innerHTML
    v-if 	 		:  条件渲染（动态控制节点是否存存在）
    v-else 		:  条件渲染（动态控制节点是否存存在）
    v-show 		:  条件渲染 (动态控制display)
    v-for  		:  遍历数组/对象/字符串
    v-on   		:  绑定事件监听, 可简写为@
    v-bind:xxx : 单向绑定解析表达式, 可简写为 :xxx
    v-model		: 双向数据绑定
自定义指令
    1.自定义一个v-upper-text指令,实现和v-text同样的功能,但会吧内容变为大写
    2.自定义一个v-lower-text指令，实现和v-text同样的功能，但会把内容变为小写。
    注意:定义指令的时候不加v- 但是使用的时候必须加上v-
 -->
<div id="root">
    <h2 v-upper-text="msg">123</h2>
    <div v-html="b"></div>-->
    <h2> v-upper-text>123456</h2>
    <h2> v-lower-text>123456</h2>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false//禁止提示生产提示
    //全局注册指令
    Vue.directive('lowerText',function(element,directiveObj){
        element.innerText += directiveObj.value.toLowerCase()
    })
    new Vue({
        el: "#root",
        data() {
            return {
                a:"school",
                b:'<a href="https://www.baidu.com">点我去百度</a>'
            }
        },
        //局部注册
        directives:{
            //自定义一个v-upper-text指令，实现和v-text同样的功能，但会把内容变为大写。
            'upper-text'(element,directiveObj){
                element.innerText += directiveObj.value.toUpperCase()
            }
        }
    })

</script>
</body>
</html>